<template>
    <div class="goods-detail-opera">
        <el-row style="width: 100%" :gutter="10">
            <el-col :xs="18" :sm="18" :md="18" :lg="18" :xl="18">
                <el-row style="width: 100%" :gutter="10">
                    <el-col :xs="24" :sm="24" :md="24" :lg="18" :xl="10">
                        <slot name="muliteEntry" />
                    </el-col>
                    <el-col :xs="8" :sm="8" :md="8" :lg="6" :xl="10">
                        <slot name="goodsInput" />
                    </el-col>
                </el-row>
            </el-col>
            <el-col :xs="4" :sm="4" :md="4" :lg="4" :xl="4">
                <slot name="operat" />

                <el-checkbox v-model="goodsFlag" class="goods-checkbox" @change="change">
                    {{ $t('commonWord.showGoodsImage') }}
                </el-checkbox>
                <el-button type="text" size="small" class="sort-btn" @click="openFieldsSort">
                    {{ $t('commonWord.fieldsSort') }}
                </el-button>
            </el-col>
            <el-col>
                <barcode-record ref="barcodeRecord" :barcodeRecord="barcodeRecord" />
            </el-col>
        </el-row>
    </div>
</template>

<script lang="ts">
import Component, { mixins } from 'vue-class-component';
import { Prop, Watch } from 'vue-property-decorator';

@Component({
    name: 'product-detail-operation',
    components: {
        barcodeRecord: () => import('@/layout-components/barcode-record/index.vue')
    }
})
export default class App extends mixins() {
    @Prop({ required: true }) barcodeRecord;
    @Prop() showGoodsImage: boolean;

    @Watch('showGoodsImage', { immediate: true })
    onValueChange(current) {
        this.goodsFlag = current;
    }
    goodsFlag: boolean = false;
    openFieldsSort() {
        this.$emit('openFieldsSort');
    }
    change(value) {
        console.log('value', value);
        this.$emit('update:showGoodsImage', value);
    }
}
</script>

<style scoped lang="scss">
.sort-btn {
    margin-left: 10px;
    height: 28px;
}
</style>
